/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react'
import { withRouter } from 'react-router-dom';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined
} from '@ant-design/icons';
import { Button, Layout, theme, Dropdown, Space, Avatar } from 'antd';
import { connect } from 'react-redux';
const { Header } = Layout;

function TopHeader(props) {
    // console.log(props);
    const { role: { roleName }, username } = JSON.parse(localStorage.getItem("token"));

    // const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const items = [
        {
            key: '1',
            label: (
                <a target="_self" rel="noopener noreferrer" href="http://localhost:3000">
                    {roleName}
                </a>
            ),
        },
        {
            key: '2',
            danger: true,
            label: '退出',
            onClick: () => {
                // console.log(props);
                localStorage.removeItem("token");
                props.history.replace('/login')
            }
        },
    ];

    const changeCollapsed = () => {
        props.changeCollapsed();
    }

    return (
        <Header
            style={{
                padding: '0px 16px',
                background: colorBgContainer,
            }}
        >
            <Button
                type="text"
                icon={props.isCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                onClick={() => changeCollapsed()}
                style={{
                    fontSize: '16px',
                    width: 64,
                    height: 64,
                }}
            />
            <div style={{
                float: "right",
                width: "200px",
                display: "flex",
                justifyContent: "space-around"
            }}>
                <span>
                    欢迎 <span style={{ color: "#1890ff" }}>{username}</span> 回来
                </span>
                <Dropdown
                    menu={{
                        items,
                    }}
                >
                    <a onClick={(e) => e.preventDefault()} style={{ color: "black" }}>
                        <Space>
                            <Avatar
                                style={{
                                    backgroundColor: 'skyblue',
                                }}
                                icon={<UserOutlined />}
                            />
                        </Space>
                    </a>
                </Dropdown>
            </div>
        </Header >
    )
}
/**
 * connect(
 *  参数：
 *      mapStateToProps
 *      mapDispatchToProps
 * )(被包装的组件)
 */

const mapStateToProps = ({ CollapsedReducers: { isCollapsed } }) => {
    return {
        isCollapsed
    }
}

const mapDispatchToProps = {
    changeCollapsed() {
        return {
            type: "change_collapsed"
        }
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TopHeader))  
